import { computed, ref } from 'vue';

export default function useFullScreen(initValue = false) {
  const isFullscreen = ref(initValue);

  const toggle = () => {
    isFullscreen.value = !isFullscreen.value;
  };

  const screenClass = computed(() => {
    if (isFullscreen.value) {
      return 'full-screen';
    }

    return '';
  });

  // watch(isFullscreen, (newVal) => {
  //   if (newVal) {
  //     document.body.classList.add('isScreen');
  //   } else {
  //     document.body.classList.remove('isScreen');
  //   }
  // });

  return {
    isFullscreen,
    toggle,
    screenClass,
  };
}
